<template>
  <div class="login-container">
    <div class="login-content">
      <!-- 左侧装饰区域 -->
      <div class="login-decoration">
        <div class="decoration-content">
          <h1 class="decoration-title">非遗文化传承平台</h1>
          <p class="decoration-subtitle">传承千年文明，守护文化瑰宝</p>
          <div class="decoration-images">
            <el-image 
              v-for="(img, index) in decorationImages" 
              :key="index"
              :src="img"
              fit="cover"
              class="decoration-image"
            />
          </div>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="login-form-wrapper">
        <div class="login-form-content">
          <div class="form-header">
            <h2>欢迎登录</h2>
            <p class="text-gray-500">请使用您的账号密码登录</p>
          </div>

          <el-form 
            :model="loginForm" 
            :rules="rules" 
            ref="loginFormRef" 
            @submit.prevent="handleLogin"
            class="login-form"
          >
            <el-form-item prop="username">
              <el-input 
                v-model="loginForm.username" 
                placeholder="请输入用户名"
                :prefix-icon="User"
                size="large"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input 
                v-model="loginForm.password" 
                type="password" 
                placeholder="请输入密码"
                :prefix-icon="Lock"
                show-password
                size="large"
              />
            </el-form-item>

            <div class="form-options">
              <el-checkbox v-model="rememberMe">记住我</el-checkbox>
              <el-button link type="primary" @click="handleForgotPassword">
                忘记密码？
              </el-button>
            </div>

            <el-form-item>
              <el-button 
                type="primary" 
                native-type="submit" 
                class="submit-button"
                :loading="loading"
                size="large"
              >
                {{ loading ? '登录中...' : '登录' }}
              </el-button>
            </el-form-item>

            <div class="other-login">
              <div class="divider">
                <span>其他登录方式</span>
              </div>
              <div class="social-login">
                <el-button circle>
                  <el-icon><Wechat /></el-icon>
                </el-button>
                <el-button circle>
                  <el-icon><Phone /></el-icon>
                </el-button>
                <el-button circle>
                  <el-icon><Message /></el-icon>
                </el-button>
              </div>
            </div>
          </el-form>

          <div class="register-link">
            还没有账号？
            <el-button link type="primary" @click="handleRegister">
              立即注册
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 忘记密码弹窗 -->
    <el-dialog
      v-model="forgotPasswordVisible"
      title="找回密码"
      width="400px"
      class="forgot-password-dialog"
    >
      <el-form :model="forgotForm" :rules="forgotRules" ref="forgotForm">
        <el-form-item prop="email">
          <el-input 
            v-model="forgotForm.email" 
            placeholder="请输入注册邮箱"
            :prefix-icon="Message"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="forgotPasswordVisible = false">取消</el-button>
        <el-button type="primary" @click="handleResetPassword" :loading="resetLoading">
          发送重置链接
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/authStore';
import { ElMessage } from 'element-plus';
import { 
  User, 
  Lock, 
  Wechat, 
  Phone, 
  Message 
} from '@element-plus/icons-vue';

const router = useRouter();
const authStore = useAuthStore();
const loginFormRef = ref(null);
const forgotFormRef = ref(null);
const loading = ref(false);
const resetLoading = ref(false);
const rememberMe = ref(false);
const forgotPasswordVisible = ref(false);

// 表单数据
const loginForm = reactive({
  username: '',
  password: ''
});

const forgotForm = reactive({
  email: ''
});

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应在6-20个字符之间', trigger: 'blur' }
  ]
};

const forgotRules = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
};

// 装饰图片
const decorationImages = [
  'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg',
  'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg',
  'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg'
];

// 方法
const handleLogin = async () => {
  try {
    await loginFormRef.value.validate();
    loading.value = true;
    await authStore.login(loginForm);
    ElMessage.success('登录成功');
    router.push('/');
  } catch (err) {
    ElMessage.error(err.message || '登录失败');
  } finally {
    loading.value = false;
  }
};

const handleForgotPassword = () => {
  forgotPasswordVisible.value = true;
};

const handleResetPassword = async () => {
  try {
    await forgotFormRef.value.validate();
    resetLoading.value = true;
    // 这里添加发送重置密码邮件的逻辑
    await new Promise(resolve => setTimeout(resolve, 1000));
    ElMessage.success('重置密码链接已发送到您的邮箱');
    forgotPasswordVisible.value = false;
  } catch (err) {
    ElMessage.error(err.message || '发送失败');
  } finally {
    resetLoading.value = false;
  }
};

const handleRegister = () => {
  router.push('/register');
};
</script>

<style scoped>
.login-container {
  @apply min-h-screen bg-gray-50;
}

.login-content {
  @apply flex min-h-screen;
}

/* 左侧装饰区域 */
.login-decoration {
  @apply hidden lg:flex lg:w-1/2 bg-primary-600 relative overflow-hidden;
}

.decoration-content {
  @apply relative z-10 flex flex-col justify-center items-center text-white p-12;
}

.decoration-title {
  @apply text-4xl font-bold mb-4 text-center;
}

.decoration-subtitle {
  @apply text-xl text-white/80 mb-12 text-center;
}

.decoration-images {
  @apply grid grid-cols-2 gap-4 max-w-lg;
}

.decoration-image {
  @apply w-full h-48 rounded-lg shadow-lg;
}

/* 右侧登录表单 */
.login-form-wrapper {
  @apply flex-1 flex items-center justify-center p-8;
}

.login-form-content {
  @apply w-full max-w-md;
}

.form-header {
  @apply text-center mb-8;
}

.form-header h2 {
  @apply text-3xl font-bold text-gray-800 mb-2;
}

.login-form {
  @apply space-y-6;
}

.form-options {
  @apply flex justify-between items-center;
}

.submit-button {
  @apply w-full;
}

.other-login {
  @apply mt-8;
}

.divider {
  @apply relative text-center my-6;
}

.divider::before,
.divider::after {
  content: '';
  @apply absolute top-1/2 w-1/3 h-px bg-gray-200;
}

.divider::before {
  @apply left-0;
}

.divider::after {
  @apply right-0;
}

.divider span {
  @apply px-4 text-gray-500 bg-white relative;
}

.social-login {
  @apply flex justify-center gap-4 mt-4;
}

.register-link {
  @apply text-center mt-8 text-gray-600;
}

/* 弹窗样式 */
:deep(.forgot-password-dialog) {
  .el-dialog__body {
    @apply pt-6;
  }
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .login-decoration {
    @apply hidden;
  }
  
  .login-form-wrapper {
    @apply w-full;
  }
}

/* 动画效果 */
.login-form-content {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Element Plus 样式覆盖 */
:deep(.el-input__wrapper) {
  @apply shadow-none border border-gray-200;
}

:deep(.el-input__wrapper:hover) {
  @apply border-primary-500;
}

:deep(.el-input__wrapper.is-focus) {
  @apply border-primary-500 shadow-none;
}

:deep(.el-button--primary) {
  @apply bg-primary-500 hover:bg-primary-600;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  @apply bg-primary-500 border-primary-500;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  @apply text-primary-500;
}
</style>